<template>
  <view class="swap-form-confirm page--column">
    <view class="swap-form-confirm-item" v-if="shopSwapForm.id">
      <view class="item-title">
        <view class="i-sn">
          <view></view>调换{{ shopSwapForm.type == 1 ? "进货" : "出货" }}
        </view>
        <view class="i-status" :style="{ color: swapFormColor[shopSwapForm.status - 1] }">
          {{ swapFormStatus[shopSwapForm.status - 1] }}</view>
      </view>
      <view class="swap-form-confirm-i-item">
        <text>{{shopSwapForm.type === 1 ?'出货店主':'进货店主'}} </text>
        <text>{{ get(shopSwapForm,'swapDistributor.nickname','') }}/{{ get(shopSwapForm,'swapDistributor.mobile','')}}</text>
      </view>
      <view class="swap-form-confirm-i-item">
        <text>{{shopSwapForm.type === 1 ?'进货店主':'出货店主'}} </text>
        <text>{{ get(shopSwapForm,'operator.nickname','') }}/{{  get(shopSwapForm,'operator.mobile','') }}</text>
      </view>
      <view class="swap-form-confirm-i-item">
        <text>调换数量</text>
        <text>{{ shopSwapForm.quantity }}</text>
      </view>
      <view class="swap-form-confirm-i-item">
        <text>调换时间</text>
        <text>{{ shopSwapForm.createTime }}</text>
      </view>
    </view>

    <view class="swap-form-confirm-item" v-if="shopSwapForm.id">
      <view class="item-title">
        <view class="i-sn">
          <view></view>产品信息
        </view>
      </view>
      <view class="swap-form-confirm-i-item" :key="index"
        v-for="(item, index) in shopSwapForm.shopSwapFormGoodsItemsList">
        <text>{{ get(item,'goodsItems.name','')}}</text>
        <text>{{ get(item,'goodsItems.specJson','[]') | specification( get(item,'quantity','') )}}</text>
      </view>
    </view>

    <view class="swap-form-confirm-item--affirm" v-if="shopSwapForm.status === 2">
      <view>
        <view>确认人员：</view>
        <view>{{ `${get(shopSwapForm,'swapShop.holder.nickname','')}/${get(shopSwapForm,'swapShop.mobile','')}`}}</view>
      </view>
      <view>
        <view>确认时间：</view>
        <view>{{ shopSwapForm.createTime }}</view>
      </view>
      <view>
        <view>店铺名称：</view>
        <view>{{ get(shopSwapForm,'swapShop.name','') }}</view>
      </view>
      <view>
        <view>店铺地址：</view>
        <view>
          {{`${get(shopSwapForm,'swapShop.fullAddress','').replace(/,/g, " ")}`}}
        </view>
      </view>
    </view>
    <view v-if="shopSwapForm.status === 1 && shopSwapForm.type === 2">
      <view class="swap-form-confirm-submit" :style="{ transform: `translateY(${Number(hideSubmitModule)}00%)` }">
        <button @tap="submit(0)">确认换货</button>
        <button @tap="submit(1)">取消</button>
      </view>
      <van-dialog use-slot :title="dialog.title[dialog.type]" :show="dialog.show" show-cancel-button
        :confirm-button-color="'#DB187C'" :cancel-button-color="'#999'" @confirm="dialogConfirm" @cancel="dialogCancel">
        <view class="swap-form-confirm__dialog--tip" :style="{ color: shopList.length > 1 ? '#333' : '#666' }">
          {{ dialog.content[dialog.type] }}</view>
        <view class="swap-form-confirm__dialog--select" v-if="shopList.length > 1 && dialog.type === 0"
          @tap="clickSelect">
          <template v-for="(item, index) in shopList">
            <view :mark:indexVal="index" :key="index" :class="[index === dialog.pitchOn && 'pitchOn']">
              <view>{{ item.name }}</view>
              <view v-show="index === dialog.pitchOn">
                <icon class="iconfont">&#xe8bf;</icon>
              </view>
            </view>
          </template>
        </view>
      </van-dialog>
    </view>
    <a-logo type="text"></a-logo>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  import {
    model
  } from "@/model";

  const {
    collection
  } = model;

  export default {
    data() {
      return {
        config: {
          shopInfo: {
            entity: "ShopSwapForm",
            action: "swapFormInfo"
          },
          swapFormConfirm: {
            entity: "ShopSwapForm",
            action: "swapFormConfirm"
          },
        },
        paramObj: {
          shopInfo: {
            data: {
              query: this.params
            },
          },
        },
        shopSwapForm: {},
        swapFormStatus: ["待确认", "已完成", "已取消"],
        swapFormColor: ["#DB187C", "#1D66FD", "FF2A00"],
        hideSubmitModule: false,
        dialog: {
          show: false,
          type: 0,
          title: ["是否确认调换货？", "取消换货"],
          content: [
            "确认调换后，商品自动入库，\r\n溯源信息自动更新，无需手动入库。",
            "是否取消调换货？",
          ],
          pitchOn: 0,
        },
      };
    },
    onLoad(params) {
      params.id = +params.id;

      this.paramObj.shopInfo.data.query = params;

      this._buildApi("shopInfo").then((data) => {
        this.shopSwapForm = data;
      });
    },
    filters: {
      specification(v, num) {
        return (
          JSON.parse(v).reduce(
            (total, current) => total + current.value + "/",
            ""
          ) + `${num}件`
        );
      },
    },
    computed: {
      ...mapState("user", ["shopList"]),
    },
    methods: {
      _buildApi(name) {
        const paramObj = this.paramObj[name];

        return new Promise((resolve) => {
          collection[this.config[name].entity]
            .sendApi(this.config[name].action, paramObj)
            .then((res) => {
              if (!res.status) return;
              resolve(res.data || []);
            });
        });
      },
      submit(val) {
        this.dialog.type = val;
        this.dialog.show = true;
      },
      dialogConfirm() {
        this.hideSubmitModule = true;

        this.paramObj.swapFormConfirm = {
          params: {
            id: this.shopSwapForm.id,
            status: this.dialog.type + 2,
            swapShopId: this.shopList[this.dialog.pitchOn].id,
          },
        };
        this._buildApi("swapFormConfirm")
          .then(() => {
            this.paramObj.shopInfo = {
              data: {
                query: {
                  id: this.shopSwapForm.id
                }
              },
            };
            this._buildApi("shopInfo").then((data) => {
              this.shopSwapForm = data;
            });
          })
          .catch(() => {
            this.hideSubmitModule = false;
          });
        this.dialog.show = false;
      },
      dialogCancel() {
        this.dialog.show = false;
      },
      clickSelect(e) {
        this.dialog.pitchOn = e.mark.indexVal;
      },
    },
  };
</script>
<style lang="less">
  page {
    overflow: hidden;
    background-color: #f7f7f7;

    .swap-form-confirm {

      .swap-form-confirm-item,
      .swap-form-confirm-item--affirm {
        width: 690rpx;
        margin: 30rpx 30rpx 0;
        background: #ffffff;
        border-radius: 20rpx;
        box-sizing: border-box;

        >view {
          padding: 0 20rpx;
        }

        .item-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 100rpx;
          font-size: 32rpx;

          .i-sn {
            display: flex;
            align-items: center;
            font-weight: bold;

            view {
              width: 6rpx;
              height: 36rpx;
              margin-right: 11rpx;
              background: #db187c;
              border-radius: 3rpx;
            }
          }

          .i-status {
            color: #db187c;
          }
        }

        .swap-form-confirm-i-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 90rpx;
          font-size: 30rpx;
          color: #333;

          text:first-child {
            color: #666;
          }
        }

        .button {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          height: 99rpx;
          border-top: 1rpx solid #f4f4f4;

          .b-item {
            width: 180rpx;
            height: 60rpx;
            margin-left: 15rpx;
            background: #fff;
            border-radius: 30rpx;
            font-size: 30rpx;
            text-align: center;
            line-height: 60rpx;
            border: 1rpx solid #db187c;
            color: #db187c;
          }
        }
      }

      .swap-form-confirm-item--affirm {
        margin-top: 40rpx;
        background-color: transparent;

        >view {
          display: flex;
          padding: 0 0 28rpx;
          font-size: 30rpx;

          >view:first-child {
            white-space: nowrap;
            color: #666;
          }

          >view:last-child {
            color: #333;
          }
        }
      }

      .dialog-index--van-dialog {
        border-radius: 10rpx;
      }

      .van-dialog__header {
        padding: 36rpx 0 52rpx;
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
      }

      &__dialog--tip {
        margin-bottom: 32rpx;
        text-align: center;
        font-size: 34rpx;
        white-space: pre-wrap;
      }

      &__dialog--select {
        margin: 30rpx;

        >view {
          display: flex;
          align-items: center;
          padding: 0 20px;
          margin-bottom: 27rpx;
          height: 84rpx;
          font-size: 30rpx;
          color: #999;
          border: 1rpx solid #e5e5e5;
          border-radius: 10rpx;
          box-sizing: border-box;
        }

        >view:last-child {
          margin-bottom: 0;
        }

        .pitchOn {
          position: relative;
          padding: 0 19px;
          border: 2rpx solid #1981f4;
          color: #1981f4;
          overflow: hidden;

          >view:last-child {
            width: 49rpx;
            height: 49rpx;
            position: absolute;
            top: 0;
            right: 0;
            background: linear-gradient(-135deg,
                #1981f4,
                #1981f4 50%,
                transparent 50%);

            .iconfont {
              position: absolute;
              top: -22rpx;
              right: -1px;
              font-size: 32rpx;
              color: #fff;
            }
          }
        }
      }

      .swap-form-confirm-submit {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100rpx;
        background-color: #fff;

        >button {
          margin: 0 30rpx 0 0;
          padding: 0;
          width: 180rpx;
          height: 60rpx;
          font-size: 30rpx;
          color: #db187c;
          text-align: center;
          line-height: 60rpx;
          background-color: #fff;
          border: 1rpx solid #db187c;
          border-radius: 30rpx;
        }

        >button:last-child {
          color: #666;
          border: 1rpx solid #999999;
        }

        .button-hover {
          background-color: #dedede;
        }
      }
    }
  }
</style>